<template>
    <div id="trunk" class="trunk">
		<vHead :appPath="getPath" appTitle="个人空间"></vHead>
        <main class="main">
            <router-view />
        </main>
        <vFoot />
    </div>
</template>
<script>
import vHead from "@/components/common/header";
import vFoot from '@/components/common/footer';
export default {
    computed: {
      getPath(){
        let role = this.$store.getters.userInfo.role.includes(6);
        return role ? {path: '/space/video',query: {id: this.$route.query.id}} : {path: '/space/resource',query: {id: this.$route.query.id}} ;
      }  
    },
	components: {
		vHead,
		vFoot
    }
};
</script>

<style lang="scss">
    // background:
    $bg_1:#338efc; //Main color
    $bg_2:#4c8edc; //delete color
    $bg_3:#ffffff; //white - bg
    $bg_4:#238efc;
    $bg_5:#effaff; //hover



    //size color
    $sc_1:#ffffff;
    $sc_2:#000000;
    $sc_3:#333333;
    $sc_4:#666666;
    $sc_5:#999999;
    $sc_6:#348efc; //Main color
    $sc_7:#61a4f5; //Main color
    $sc_8:#67AED2;


    $nb:1rem;



    //border
    $bd_1:1px solid #E0E0E0;
    $bd_2:1px solid #333333;
    $bd_3:1px solid #dddddd;
    $bd_4:1px solid #348efc;
    $bd_5:1px solid #2e8efd;


    $shadow:0 6px 7px 0 rgba(0, 0, 0, 0.10);
    $shadow2:0 1px 1px 0 rgba(0, 0, 0, 0.1);

    .box{
        display: inline-block;
        vertical-align: top;
    }

    // guo du
    .i_transition {
        -moz-transition: all .35s ease-in;
        -webkit-transition: all .35s ease-in;
        -o-transition: all .35s ease-in;
        transition: all .35s ease-in;
    }

    //wen ben yi cang ...
    .i_text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .i_word {
        word-wrap: break-word;
        word-break: break-all;
    }

    .roomH{
        img{
            width: 100%;
        }
    }
    .dependent{
        background: #ffffff;
        text-align: center;
        padding: 40px 0;
         > p {
            margin-top: 21px;
            color: #888;
        }
    }
    .trunk {
        background: #effaff url('../../../../public/images/bgc01.png') no-repeat;
        background-size: 100% 100%;
    }

    .main {
        box-sizing: border-box;
        min-height: calc(100vh - 154px);
        margin-bottom: 30px;
    }

    .course-menunav a {
        display: block;
        line-height: 65px;
    }

    .i_maxW {
        max-width: 1000px;
        margin: 0 auto;
    }

    .roomP {
        background: $bg_3;
        padding: 25px 55px 0 60px;
        margin-bottom: 20px;
        box-shadow: $shadow2;
        border-radius: 3px;
        min-height: 195px;
        >a,
        >span {
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            display: block;

            >img {
                width: 100%;
                height: 100%;
            }
        }

        .roomP_r {
            margin-left: 150px;
        }
    }


    .roomP_user {
        // height: 40px;
        overflow: hidden;
        >div {
            button{
                background: #0000;
                outline: none;
                border: 0;
                position: relative;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 19px;
                margin-left: 10px;
                em{
                    top: 10px;
                }
            }
            &:nth-of-type(1) {
                float: left;
                max-width: 65%;
                >h3,
                >span {
                    display: inline-block;
                    vertical-align: top;
                }

                >h3 {
                    font-size: 20px;
                    color: #000000;
                    line-height: 22px;
                }

                >span {

                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 19px;
                    background: #348EFC;
                    border-radius: 100px;
                    padding: 3px 12px;
                    margin-left: 15px;
                    margin-bottom: 8px;

                }

            }

            &:nth-of-type(2) {
                float: right;
              
                >a,
                >span {
                    display: inline-block;
                    vertical-align: top;
                    background: #64cdff;
                    border-radius: 100px;
                    width: 100px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 12px;
                    color: $sc_1;
                    margin-left: 20px;
                    cursor: pointer;
                      position: relative;
                    &:nth-of-type(2) {
                        background: #0000;
                        color: $sc_1
                    }
                }
                em{
                    position: absolute;
                    // top: 0;
                    left: 45px;
                }
                .is_follow {
                    background: #0000;
                }
            }
        }
    }

    .roomP_info {
        margin: 20px 0 30px;

        >span {
            font-size: 14px;
            color: $sc_4;
            margin-right: 60px;

            &:last-of-type {
                margin-right: 0;
            }
        }
    }

    .roomP_synopsis {
        height: 40px;
        overflow: hidden;
        margin-top: 10px;
        >p {
            @extend .i_word;
            font-size: 14px;
            color: #000000;
            line-height: 19px;
        }
    }

    .space-conten {
        text-align: center;
        text-align-last: justify;
        >div {
            text-align-last: initial;
            text-align: left;
            display: inline-block;
            vertical-align: top;
        }

       .space-path{
        width: 220px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        .el-menu{
            border-right: 0;
            padding: 20px 0;
        }
        .el-menu-item{
            position: relative;
            padding: 0 !important;
            >i{
                position: absolute;
                &:nth-of-type(1){
                    left: 17px;
                    top: 9px;
                }
                &:nth-of-type(2){
                    right: 25px;
                    top: 21px;
                    opacity: 0;
                }
            }
            >a{
                display: block;
                position: relative;
                line-height: 56px;
                text-indent: 50px;
                padding: 0 24px;
            }
        }
        .showActive{
            color: #409EFF;
            background-color: #ecf5ff;
        }
       .showActive ~ .Shape_04{
            opacity: 1 !important;;
        }
        .el-menu-item.is-active{
          
            >a{

                display: block;
            }
            
        }
       }

        .space-template {
            width: 760px;
            float: right;
            margin-left: 0;
        }
    }

    .room_lk {
        width: 200px;
        background: $bg_3;
        padding: 10px 0;

        >a {
            display: block;
            height: 60px;
            line-height: 60px;
            padding: 0 0 0 20px;
            font-size: 14px;
            position: relative;

            >i {
                &:nth-of-type(1) {
                    margin-right: 10px;
                    vertical-align: middle;
                }

                &:nth-of-type(2) {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    opacity: 0;
                }
            }
        }

        .router-link-active {
            background: #E8F2FF;

            >.Shape_04 {
                opacity: 1;
            }
        }
    }

    .room_cr {
        width: 760px;
    }

    .i_hotListD {
        width: 243px;
        max-height: 300px;
        background: $bg_3;
        border-radius: 3px;
        overflow: hidden;
        margin: 0 15px 15px 0;
        @extend .i_transition;
        box-shadow: $shadow2;

        >a {
            display: block;
            height: 120px;
            overflow: hidden;
            display: block;

            >img {
                width: 100%;
                height: 100%;
            }

        }

        .i_uClassTxt {
            padding: 10px 10px 20px;

            >a {
                display: block;
                font-size: 14px;
                line-height: 19px;
                @extend .i_text;

            }
        }

        .i_hotType2 {
            line-height: 25px;
            font-size: 12px;
            margin-top: 15px;

            >a {
                display: block;
                @extend .i_text;
                &:nth-of-type(1) {
                    >span {
                        display: inline-block;
                        vertical-align: middle;
                        width: 25px;
                        height: 25px;
                        -moz-border-radius: 50%;
                        border-radius: 50%;
                        overflow: hidden;

                        >img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .i_hCollect {
            color: #888;
            line-height: 26px;
            i{
                font-size: 18px;
                margin: 0 4px 0 0;
                vertical-align: sub;
            }
        }

        &:nth-of-type(3n) {
            margin: 0 0 15px 0;
        }

        &:hover {
            box-shadow: $shadow;

            .i_uClassTxt>a {
                color: $sc_6;
            }
        }

    }

    .xin_icon {
        width: 18px;
        margin: 4px 4px 0 0 ;
    }


    .i_hResourcesLsD {
        width: 220px;
        height: 140px;
        background: #ffffff;
        padding: 10px 12px;
        box-shadow: $shadow2;
        border-radius: 3px;
        margin: 0 14px 15px 0;

        .i_hResourcesT {
            >a {
                display: block;
                float: left;
                font-size: 16px;
                line-height: 24px;
                width: 74%;
                height: 48px;
                @extend .i_word;
                overflow: hidden;
            }
        }

        .i_hCollect {
            line-height: 22px;
        }

        .i_hResourcesS {
            margin: 30px 0 15px;
        }

        .i_rUser {
            >a {
                display: inline-block;
                line-height: 25px;
                font-size: 12px;
                max-width:100% ;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                >span {
                    display: inline-block;
                    vertical-align: middle;
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;

                    >img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

        .i_hScore {
            >div {
                display: inline-block;
                vertical-align: top;
            }

            >i {
                line-height: 20px;
                color: rgb(247, 186, 42);
            }
        }

        &:nth-of-type(3n) {
            margin: 0 0 15px 0;
        }
    }

    .i_log {
        background: $bg_3;
        padding: 20px;
        border-bottom: $bd_1;

        >a {
            float: left;
            display: block;
            font-size: 14px;
            @extend .i_text;
            max-width: 70%;
            line-height: 19px;
        }

        >i {
            float: right;
            font-size: 12px;
            color: $sc_5;
        }
    }

    .i_teacherLs {
        width: 243px;
        height: 250px;
        background: $bg_3;
        box-shadow: $shadow2;
        overflow: hidden;
        margin: 0 15px 15px 0;
        text-align: center;
        position: relative;
        .i_teacherLs_b {
            >a {
                display: inline-block;
                vertical-align: top;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
                background: #effaff;
                margin: 0 0 25px;
                margin-top: 40px;

                >img {
                    width: 100%;
                    height: 100%;
                }
            }

            >h3 {
                font-size: 18px;
                line-height: 24px;
                margin-bottom: 20px;
                font-weight: bold;
            }

            >div {
                font-size: 14px;
                line-height: 19px;
                overflow: hidden;
                height: 19px;
            }

            >p {
                font-size: 14px;
                line-height: 19px;
                color: #999999;
            }
        }

        &:nth-of-type(3n) {
            margin: 0 0 15px 0;
        }

        &:hover {
            .i_teacherLs_t {
                opacity: 1;
                visibility: visible;
            }
        }
    }

    .i_teacherLs_t {
        text-align: center;
        position: relative;
        height: 100%;
        width: 100%;
        // transform: translate3d(0, -83%, 0);
        background: #ffffff;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top:0;
        left: 0;
        >h3 {
            font-size: 18px;
            line-height: 24px;
            padding: 40px 0 20px;
            font-weight: bold;
            @extend .i_text;
            height: 20px;
        }

        >div {
            font-size: 14px;
            line-height: 19px;
            margin-bottom: 30px;
        }
        .sub_name{
            height: 19px;
        }

        >p {
            font-size: 14px;
            line-height: 19px;
            color: #999999;
            margin-bottom: 30px;
        }

        .i_brief {
            font-size: 14px;
            line-height: 19px;
            padding: 0 30px;
            overflow: hidden;
            text-align: center;
            height: 40px;
            @extend .i_text;
        }

        .i_teacherLs_m {
            margin: 0;
            background: #338efc;
            padding: 5px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            text-align-last: justify;

            >i {
                cursor: pointer;
                margin: 0 15px;
            }
        }
    }






    .type_val {
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin-left: 40px;

        .el-input__inner {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            border-radius: 0;
            color: $sc_2;
        }
    }


    .notice_cont {
        margin-bottom: 60px;
    }

    #collection {
        text-align: center;
        text-align-last: justify;
        margin: 30px auto 80px;

        >div {
            text-align-last: initial;
            text-align: left;
        }
    }



    .class_cont {
        width: 780px;
        background: $bg_3
    }


    .classLs {
        padding: 25px 0;
        border-bottom: $bd_1;

        >a {
            display: block;
            background: #E8F2FF;
            border: 1px solid #D3ECFF;
            width: 160px;
            height: 90px;
            float: left;
            @extend .i_transition;

            >img {
                width: 100%;
                height: 100%;
            }

            &:hover {
                box-shadow: $shadow;
            }
        }

        >span {
            display: block;
            float: left;
            max-width: 60px;
            max-height: 50px;
            overflow: hidden;

            >img {
                width: 100%;
                height: 100%;
            }
        }

        &:first-of-type {
            border-top: $bd_1;
        }
    }

    .classLs_info {
        margin-left: 180px;

        .classLs_1 {
            height: 21px;
            margin-bottom: 20px;

            >a {
                display: block;
                float: left;
                max-width: 60%;
                @extend .i_text;
                font-size: 16px;
                color: #000000;
                font-weight: bold;
                line-height: 21px;

                &:hover {
                    color: $sc_6;
                }
            }

        }
    }

    .classLs_2 {
        margin-bottom: 15px;

        >strong {
            font-size: 14px;
            color: #6A87AC;
            margin-right: 20px;

            &:after {
                display: inline-block;
                content: '';
                border-right: $bd_1;
                height: 12px;
                padding-left: 15px;
            }
        }

        >span {
            font-size: 12px;
            color: $sc_4;
            background: #E9E9E9;
            padding: 4px 7px;
            margin-right: 10px;
        }
    }

    .classLs_3 {
        font-size: 12px;
        color: #888888;
        @extend .i_text;
        line-height: 19px;
    }

    .classLs_4 {
        font-size: 0;
        margin-bottom: 15px;

        >span {
            font-size: 14px;
            color: $sc_4;
            margin-right: 20px;
            display: inline-block;
            vertical-align: top;
            @extend .i_text;
            max-width: 120px;
            line-height: 20px;

            &:after {
                content: '';
                display: inline-block;
                vertical-align: middle;
                border-right: $bd_1;
                height: 12px;
                padding-left: 15px;
            }

            &:first-of-type {
                color: #EBA300;


            }

            &:last-of-type {
                margin-right: 0;

                &:after {
                    padding: 0;
                    display: none;
                }
            }
        }
    }

    .resource_g {
        margin-left: 80px;

        .classLs_4 {
            >span {
                &:first-of-type {
                    color: #6A87AC;
                }
            }
        }

        >div {
            &:last-of-type {
                margin: 0;
            }
        }
    }

    .pageing,
    .el-pagination {
        padding: 20px 0 20px;

        .el-pagination__sizes {}

        .el-pager {
            li {
                color: #6A87AC;
                padding: 0;
                min-width: 30px;
            }

            .active {
                color: $sc_1;
                background: $bg_1;
            }
        }

        .el-pagination__total,
        .el-pagination__jump {
            color: #6A87AC;
        }

        .el-input__inner {
            border: 1px solid #D5EAFB;
            border-radius: 0;
        }
    }


    .u_resourceK {
        font-size: 14px;
        margin-bottom: 30px;

        >a {
            margin-right: 40px;
            line-height: 19px;
        }
    }

    .test2 {
        background: $bg_3;

        .classH {
            padding-bottom: 30px;
        }
    }

    .i_choiceT {
        background: #EFF6FF;
        height: 36px;
        line-height: 36px;
        padding: 0 30px;
        font-size: 12px;

        .i_choiceT_l {
            >span {
                color: #333333;
                float: left;
                position: relative;

                &:after {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    width: 1px;
                    height: 10px;
                    background: #979797;
                    margin: 0 20px;
                }

                &:last-of-type {
                    &:after {
                        display: none;
                    }
                }
            }
        }

        .i_choiceT_r {
            .bcxc {
                color: #348efc;
                margin-left: 30px;
                cursor: pointer;
            }
        }
    }

    .i_choiceC {
        padding: 20px;
        position: relative;
    }

    .i_testTxt {
        font-size: 14px;
        line-height: 30px;
        padding: 0 10px;

        >img {
            max-width: 94%;
        }

        >strong {
            position: absolute;
            right: 30px;
        }
    }

    .i_choiceLs {
        @extend .i_testTxt;

        >label {
            cursor: default;
            float: left;

            >input {
                display: none;
            }
        }
    }

    .i_analysisBox {
        z-index: 2;

        .i_analysis {
            line-height: 30px;
            font-size: 14px;

            >span {
                display: block;
                float: left;
                width: 60px;
                color: #666666;
            }

            >div {
                font-size: 14px;
                margin-left: 80px;
                word-wrap: break-word;
                word-break: break-all;
            }
        }
    }

    .analyP {
        padding: 20px 40px;
        max-height: 500px;
        overflow: hidden;
        overflow-y: auto;
    }

    #classSpace {
        padding: 30px 40px;
        text-align-last: justify;
        text-align: center;

        >div {
            text-align: left;
            text-align-last: initial;
        }
    }

    .classSpace_link {
        width: 260px;

        .menuLk {
            width: 100%;
        }
    }

    .classSpace_h {
        background: $bg_3;
        padding: 20px 20px 30px;
        margin-bottom: 20px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10);
        border-radius: 3px;
        ;
    }

    .classSpace_h1 {
        text-align: center;
        text-align-last: justify;

        >i,
        >div {
            display: inline-block;
            vertical-align: middle;
            text-align-last: initial;
            text-align: left;
        }
    }

    .classSpace_hc {
        width: 120px;

        .el-input__inner {
            border: 0;
            font-weight: bold;
        }
    }

    .classSpace_h2 {
        margin-top: 30px;

        >span {
            font-size: 14px;
            color: #000000;
            display: block;
            width: 130px;
            overflow: hidden;
            height: 20px;
            line-height: 20px;
            @extend .i_text;
            float: left;

            &:last-of-type {
                margin: 0;
                width: 80px;
                float: right;
            }
        }
    }

    .classSpace_hk {
        width: 100%;
    }

    .classSpace_cont {
        width: calc(720px - 80px);
        background: $bg_3;
        padding: 20px 40px 60px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.10);
        border-radius: 3px;
        ;
    }

    .chatCont_bx{
        img{
            width: 26px;
            height: 26px;
        }
    }
</style>